<template>
    <div class="hello">
        <div class="content">
            <div class="c_box">
                <div class="title">
                    <h3>密马APP</h3>
                    <p>不发快递的玩意，这全有~</p>
                </div>
                <div class="phone">
                    <img src="@/assets/images/asset.png" alt="">
                </div>
                <div class="download" @click="jumpApp">
                    <button>立即下载</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import {appDown} from '@/api/index'

  export default {
    props: {},
    data() {
      return {
        ios: '',
        android: ''
      }
    },
    created() {
      appDown().then(res => {
        // console.log(res)
        this.android = res.data.android_url
        this.ios = res.data.ios_url
      })
    },
    methods: {
      jumpApp() {
        var u = navigator.userAgent;
        var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
        if (isAndroid) {
          window.open(this.android)
        } else {
          window.open(this.ios)
        }
      }
    }
  }
</script>

<style scoped lang="scss">
    .content {
        width: 100%;
        height: 543px;
        background: #F9DE4B;
        padding: 11px 0 13px;

        .c_box {
            width: 100%;
            height: 460px;
            // background: url('../assets/images/bg.png') no-repeat;
            background-size: 100% 100%;

            .title {
                text-align: center;

                h3 {
                    font-size: 24px;
                    font-weight: 700;
                    margin: 40px 0 8px;
                }

                p {
                    font-size: 14px;
                    opacity: 0.7;
                }
            }

            .phone {
                img {
                    width: 375px;
                    height: 336px;
                }
            }

            .download {
                text-align: center;

                button {
                    background: linear-gradient(to top, #ffeb89 0%, #fffbe7 100%);
                    width: 300px;
                    height: 48px;
                    border-radius: 30px;
                    // background: #ffffff;
                    border: none;
                    outline: none;
                    font-size: 16px;
                    box-shadow: 1px 10px 9px 0px rgba(235, 163, 26, 0.22);
                    font-weight: 600;
                    color: #2f2f2f;
                }

                .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
                    outline: none;
                    border-color: transparent;
                    box-shadow: none;
                    // background:#77bc1f;
                    //  color:#fff;
                }

            }
        }
    }
</style>
